<template>
    <div class='video-award-details'>
        <c-title text="推广权限"></c-title>
        <div class="title">推广视频</div>
        <div class="main">
            <div class="img-box">
                <img :src="cover_url" alt="" />
                <div class="btn" @click="toVideo">查看视频</div>
            </div>
            <div class="main-txt">奖励金额{{ detail.price }}元，1天最多奖励{{ detail.day_limit }}次，一次奖励{{ detail.single_price }}元，
                当前已领{{ detail.day_count }}次</div>
        </div>
        <div class="award-info flex-a-c">
            <div class="award-txt">奖励记录</div>
            <div class="price" v-if="detail.activity_status">已获得{{ detail.count_reward }}元</div>
        </div>
        <div class="list">
            <template v-if="record_list&&record_list.length !== 0">
                <div class="list-item flex-a-c flex-j-sb" v-for="item in record_list" :key="item.id">
                    <div class="left flex-a-c">
                        <img :src="item.watch_member&&item.watch_member.avatar" alt="" />
                        <div>
                            <div class="name">{{ item.watch_member&&item.watch_member.nickname }}</div>
                            <div class="id">ID:{{ item.id }}</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="award-price">{{ $i18n.t('money') }}{{ item.price }}</div>
                        <div class="time">{{ item.created_at }}</div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="no-buy">
                    <div>
                        <img :src="no_rewards" alt="" />
                        <div class="text">暂无奖励记录</div>
                    </div>
                </div>
            </template>
        </div>
        <div class="footer" :class="{ 'w375': fun.isPc() }">
            <button class="order" :class="{ 'flex-1': detail.activity_status == 0 }" @click="order">查看订单</button>
            <button class="share-video" @click="show = true" v-if="detail.activity_status">分享视频</button>
        </div>

        <van-dialog v-model="show" :showConfirmButton="false" :showCancelButton="false">
            <i class="iconfont icon-icon_close" @click="show = false"></i>
            <div class="dialog-title">分享</div>
            <div class="flex-a-c flex-j-sa" style="margin-bottom: 2.75rem;margin-top: 1.7188rem;line-height: 1;">
                <div class="flex-column flex-a-c" v-if="this.fun.getTyep() != 5 || this.fun.isCPS()"
                    @click="shareWeixin()">
                    <i class="iconfont icon-fx_haoyou"></i>
                    <div>分享好友</div>
                </div>
                <div class="flex-column flex-a-c" v-clipboard:copy="video_url" v-clipboard:success="onCopy">
                    <i class="iconfont icon-ht_operation_copyline"></i>
                    <div>复制链接</div>
                </div>

            </div>
        </van-dialog>

        <div class="success-box">
            <van-dialog v-model="popularize" :showConfirmButton="false" :showCancelButton="false">
                <div class="share-box">
                    <img :src="Imgurl" alt="">
                    <div class="share-title">推广成功</div>
                    <div class="member">
                        <template v-for="(item, index) in member_list">
                            <div class="member-item" :key="item.uid" v-if="member_list.length==3||index+1<3">
                                    <img :src="item.avatar" alt="" />
                                    <div class="member-txt">{{ item.nickname }}</div>
                            </div>
                        </template>
                        <div class="member-item" v-if="nums>3">
                            <div class="more-icon">
                                    <i class="iconfont icon-fontclass-tiezishezhi"></i>
                                </div>
                                <div class="icon-txt">
                                    <i class="iconfont icon-fontclass-rengezhongxin"></i>x{{ nums - 2}}
                                </div>
                        </div>
                    </div>
                    <div class="share-tip">好友已为你助力</div>
                </div>
                <i class="iconfont icon-adsystem_icon_cancle" @click="popularize = false"></i>
            </van-dialog>
        </div>

    </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            no_rewards: window.location.origin + '/static/local/video-promotion-rewards/no-rewards.png',
            isLoadMore: true,
            page: 1,
            total_page: 0,
            cover_url: "",
            share_title: "",
            Imgurl: window.location.origin + '/static/local/video-promotion-rewards/success.png',
            detail: {},
            show: false,
            video_url: '',
            record_list: [],
            popularize: false,
            member_list: [],
            nums:0,
        };
    },
    async activated() {
        this.isLoadMore = true;
        this.popularize = false;
        await this.getVideo()
        await this.getData()
    },
    methods: {
        setConfig(_titles,_imgUrls) {
            let _link = this.video_url;
            wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: _titles,
                    link: _link,
                    desc:'打开帮我助力',
                    imgUrl: _imgUrls,
                    success: function () {
                        // 设置成功
                        console.log('成功===');
                    },
                    fail: function () {
                        console.log('失败===');
                    }
                })
            });

        },
        getVideo() {
            let json = { id: this.$route.params.id };
            $http.post("plugin.video-promotion-rewards.frontend.income.getShareUrl", json, "加载中").then(res => {
                if (res.result) {
                    this.video_url = res.data.url
                } else {
                    this.$toast(res.msg);
                }
            });
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) return;
            let page = this.page + 1;
            this.getData(page);
        },
        getData(page = 1) {
            let json = { page, id: this.$route.params.id };
            $http.post("plugin.video-promotion-rewards.frontend.income.getDetail", json, '.').then(({ result, msg, data }) => {
                if (result) {
                    this.isLoadMore = true;
                    this.detail = data.detail;
                    let member_list = data.member_list || [];
                    this.nums = member_list.length
                    this.member_list = member_list;
                    if (data.member_list.length !== 0) {
                        this.popularize = true;
                    }
                    if (data.record_list.data.length !== 0) {
                        this.record_list = page == 1 ? data.record_list.data : this.record_list.concat(data.record_list.data);
                        this.page = data.record_list.current_page;
                        this.total_page = data.record_list.last_page;
                    }
                    page == 1 && this.getCoverImg(data.detail.video_id);

                } else {
                    this.$toast(msg);
                }
            })
        },
        getCoverImg(video_goods_id) {
            $http.get("plugin.video-share.frontend.video.getVideoGoods", { video_goods_id }, '.').then(res => {
                if (res.result == 1) {
                    console.log(res.data,'===');
                    this.share_title = res.data.video_goods.title;
                    this.cover_url = res.data.video_goods.cover;
                    this.setConfig(res.data.video_goods.title,res.data.video_goods.cover)
                }
            })
        },
        onCopy() {
            this.$toast("复制成功");
            this.show = false;
        },
        order() {
            this.$router.push(this.fun.getUrl('orderdetail', { order_id:this.detail.order_id, orderType: 'shop' }));
        },
        shareWeixin() {
            //不是微信端 不访问
            if (this.fun.getTyep() == 5) {
                return;
            } else if (this.fun.getTyep() == 7 || this.fun.isCPS()) {
                this.appSharesinit();
                return;
            }
            this.$dialog.alert({ message: "请点击右上角微信分享" });
        },  //app获取分享数据
        appSharesinit() {
            var json = {
                url: this.video_url,
                i: this.fun.getKeyByI(),
                type: this.fun.getTyep()
            };
            $http.post('member.member.wxJsSdkConfig', json).then(
                (response) => {
                    if (response.result == 1) {
                        this.appShare(response.data);
                    }
                },
                function (response) {
                    console.log(response);
                }
            );
        },
        //app分享设置
        appShare(data) {
            let _title = '';
            let _imgUrl = '';
            let _desc = '';
            _title = this.share_title ? this.share_title : data.share.title;
            _imgUrl = this.cover_url ? this.cover_url : data.share.icon;
            _desc = '';
            let _link = this.video_url + '&share_tag=2';
            _link = this.fun.isMid(_link, data.info.uid);
            YDB.Share(_title, _desc, _imgUrl, _link, 'Sharesback');
        },
        toVideo() {
            window.location.href = this.video_url;
        }
    }
};
</script>

<style scoped lang='scss'>
.success-box ::v-deep .van-dialog {
    background-color: unset;
    width: max-content;
}

.video-award-details {
    .w375 {
        width: 375px;
        position: fixed;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .flex-1 {
        flex: 1;
    }

    .icon-fontclass-tiezishezhi {
        font-size: 1.5rem;
        color: #F96D20;
        font-weight: bold;
    }

    .icon-fontclass-rengezhongxin {

        color: #999999;
    }

    .icon-txt {
        display: flex;
        align-items: center;
        font-weight: 400;
        line-height: 1;
        font-size: 0.85rem;
        color: #999999;
    }

    .more-icon {
        width: 3rem;
        height: 3rem;
        background: #FFF4EF;
        border: 2px solid #F96D20;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin-bottom: .4375rem;
    }

    .member {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .icon-adsystem_icon_cancle {
        margin-top: 1.5625rem;
        display: block;
        font-size: 3rem;
        color: #D6D6DC;
    }

    .member-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 1;
        color: #999999;
        font-weight: 400;
        font-size: .75rem;

        img {
            margin: 0;
            width: 3rem !important;
            height: 3rem !important;
            border-radius: 100%;
        }

    }

    .member-txt {
        width: 3.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
        margin-top: .4375rem;
    }

    .share-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 44%;
        line-height: 1;
        font-weight: bold;
        font-size: 1.125rem;
        color: #4E0808;
    }

    .share-tip {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5%;
        font-weight: 400;
        font-size: .875rem;
        color: #4E0808;
        line-height: 1;
    }

    .share-box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: baseline;

    }

    .success-box {
        img {
            width: 15.625rem;
            margin: 0;
        }

        .bg-img {
            width: 15.625rem;
            padding-top: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    }

    .icon-icon_close {
        position: absolute;
        right: 1.5rem;
        top: 1.8rem;
        color: #D6D6DC;
        font-weight: bold;
    }

    .dialog-title {
        font-weight: 400;
        font-size: 1.125rem;
        color: #00001C;
        text-align: center;
        line-height: 1;
        margin-top: 1.75rem;
    }

    .no-buy {
        height: 18.125rem;
        background: #FFFFFF;
        border-radius: .5rem;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            margin: 0;
            width: 7.1875rem;
        }

        .text {
            font-weight: 400;
            font-size: .8125rem;
            color: #6E6E79;
            margin-top: .7188rem;
        }
    }

    .icon-fx_haoyou,
    .icon-ht_operation_copyline {
        width: 2.75rem;
        height: 2.75rem;
        background: #FD6343;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 50%;
        font-size: 1.35rem;
        background-color: #51A8F1;
        margin-bottom: .6875rem;
    }

    .icon-fx_haoyou {
        background-color: #FD6343 !important;
    }

    .img-box {
        position: relative;
        text-align: left;

        img {
            margin: 0;
            width: 12.5rem;
        }
    }

    .award-txt {
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
    }

    .list {
        padding: 0 .75rem 4.5rem;
    }

    .list-item {
        margin-bottom: .625rem;
        background-color: #fff;
        border-radius: .5rem;
        padding: .75rem;

        img {
            width: 2.5rem;
            height: 2.5rem;
            background: #F0F0F1;
            border-radius: .5rem .5rem .5rem .5rem;
            margin: 0;
            margin-right: .5rem;
        }
    }

    .award-price {
        font-weight: 500;
        font-size: .875rem;
        color: #F15353;
        text-align: right;
    }

    .time {
        font-weight: 400;
        font-size: .8125rem;
        color: #6E6E79;
        text-align: right;
    }

    .name {
        font-weight: bold;
        font-size: .8125rem;
        text-align: left;
        color: #00001C;
    }

    .id {
        font-weight: 400;
        font-size: .8125rem;
        color: #6E6E79;
    }

    .award-info {
        margin: 1.0625rem 1.3125rem .75rem;
        line-height: 1;
    }

    .price {
        font-weight: 400;
        font-size: .8125rem;
        color: #999999;
        margin-left: .3125rem;
    }

    .main-txt {
        text-align: left;
        font-weight: 400;
        font-size: .875rem;
        color: #999999;
        margin-top: .7813rem;
    }

    .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 3.5625rem;
        width: 5.375rem;
        line-height: 2rem;
        height: 2rem;
        border-radius: 1.4688rem 1.4688rem 1.4688rem 1.4688rem;
        background-color: rgba(0, 0, 0, 0.5);
        font-weight: 400;
        text-align: center;
        font-size: .8125rem;
        color: #FFFFFF;
    }

    .title {
        margin: .8125rem 0 .7813rem 1.3125rem;
        line-height: 1;
        font-weight: 500;
        font-size: .9375rem;
        text-align: left;
        color: #00001C;
    }

    .main {
        background-color: #fff;
        border-radius: .625rem;
        margin: 0 .75rem;
        padding: .7813rem .75rem 1rem;
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FFFFFF;
        box-shadow: 0px -1px 10px 1px #F5F5F5;
        display: flex;
        padding: .625rem .75rem;
    }

    .share-video {
        flex: 1;
        margin-left: .9375rem;
        background: #F15353;
        border-radius: 1.2813rem;
        font-weight: 500;
        font-size: .9375rem;
        color: #FFFFFF;
    }

    button {
        border: none;
    }

    .order {
        width: 6.625rem;
        height: 2.5rem;
        border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
        border: .0313rem solid #F15353;
        font-weight: 500;
        font-size: .9375rem;
        color: #F15353;
    }

}
</style>